import React from 'react'
import PropTypes from 'prop-types'
import { Row } from 'antd'
import { fieldlist } from './cssData'

import './FieldSample.less'

export default function FieldSample(props) {
  let list = fieldlist.map(li => {
    if(props.current === 0) {
        li['value'] === '......' || (li['value'] = '')
    }
    else {
      let key = props.styles[li.field];
      li['value'] = key? key: li.value
    }
    return li;
  });
  return (
    <Row className="field-sample">
      {
        list.map(it => {
          let val = props.styles[it.field];
          let value = val? val: it.value;
          return (
          <Row className={value? '': 'disabled'} key={it.field}>{ it.field + ': ' }{ value }</Row>
          );
        })
      }
    </Row>
  )
}

FieldSample.propTypes = {
  styles: PropTypes.objectOf(PropTypes.string).isRequired,
  current: PropTypes.number.isRequired
};
